<extend name="Public/common"/>
<block name="othercss">

</block>
<block name="body">
<div class="mian" style="background-color: #f4f4f4">
    <div class="help">
        <div class="box">
            <div class="loc"><i class="icon iconloc"></i>您现在在这里：<a href="{:urlrotue('/')}">白宝库</a> > <a href="{:urlrotue('Member/index')}">个人中心</a> > <span class="on">退货及换货</span>
            </div>
            <div class="clearfix help_list">
                <div class="right">
                    <h2 class="title">退货及换货</h2>
                    <div class="sq_list">
                        <ul class="clearfix">
                            <li class="on">
                                <div class="sq1">申请退款</div>
                                <div class="sq2 icon"></div>
                                <div class="sq3"></div>
                            </li>
                            <li>
                                <div class="sq1">处理退款申请</div>
                                <div class="sq2 icon"></div>
                                <div class="sq3"></div>
                            </li>
                     
                            <li>
                                <div class="sq1">完成</div>
                                <div class="sq2 icon"></div>
                                <div class="sq3"></div>
                            </li>
                        </ul>
                    </div>
                    <div class="sq_pro clearfix">
                      <form name="frm1" id="frm1" onSubmit="return false;" method="post">
                        <div class="right1 on">
                            <div class="title">退换申请单</div>
                            <dl class="right4">
                                
                           
                                    
                                <dd>是否收货：<label>&nbsp;<input type="radio" name="is_shouhuo" checked="checked" value="0">&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="radio"  name="is_shouhuo" value="1">&nbsp;否</label></dd>
                                <dd>退款原因：
                                    <div class="ul_list">
               <select class="type" name="reason" id="reason" style="width:240px; height:30px; border: 1px solid #e4e4e4; color:#666">
                    <option value="">请选择退款原因</option>
                    <option value="商品质量有问题">商品质量有问题</option>
					<option value="收到商品破损">收到商品破损</option>
					<option value="收到商品与描述不符">收到商品与描述不符</option>
                    <option value="其他原因">其他原因</option>
          </select>
                                          
                                    </div>
                                </dd>
                                <dd>退款金额：<input type="text" class="input1"  name="price" id="price"  onkeyup="value=value.replace(/[^\d\.]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d\.]/g,''))" onchange="jisuan_price(this);" value="{$model['goods_price']*$model['goods_num']}"/></dd>
                                <dd> 退款说明： <textarea class="input3" name="detail" id="detail" onKeyUp="javascript:checkWord(this);" onMouseDown="javascript:checkWord(this);"></textarea> 剩余<span class="tips" id="wordCheck">200</span>字</dd>
                                <dd class="dd2">上传凭证：<input type="button" class="btn"  id="pickfiles" value="上传图片"/></dd>
                                <dd class="dd1">每张图片大小不超过5M，最多5张，支持GIF、JPG、PNG格式!<br>
                                   
                                 <input type="hidden" id="container_value" name="picture" size="200">
                                <div id="container" style="margin-top:10px;"></div>
                                 <div style="clear:both;"></div>
                                    </dd>
                                     <input type="hidden" name="cart_id" id="cart_id" value="{$model.id}" />
                                <dd><input type="button"  onclick="tuihuan_submit();" class="input2" value="提交退款申请"/></dd>
                            </dl>
                        </div>
                        </form>

                        
                        <div class="left1">
                            <div class="title">我要退款商品</div>
                            <a class="clearfix cell1">
                                <div class="lans">
                                    <div class="name">
                                    {$model.goods_name}
       
                                    </div>
                                    <div class="guige">  {$model.goods_spec}
                                    </div>
                                </div>
                                <div class="imgs">
                                    <img src="__ROOT__{$model.goods_picture}" width="80" height="80"/>
                                </div>
                            </a>
                            <ul class="message">
                                <li class="clearfix">
                                    <div class="li1">收货地址：</div>
                                    <div class="li2">  {$model2.addr_realname}，{$model2.addr_phone}，<br>
                                    {$model2.addr_province}{$model2.addr_city}{$model2.addr_area}{$model2.addr_address}，<br>
                                    {$model2.zipcode}
                                    </div>
                                </li>
                                <li class="clearfix">
                                    <div class="li1">商品单价：</div>
                                    <div class="li2" style="color:#999999;">{$model.goods_price}元     &nbsp;&nbsp;&nbsp;&nbsp;X{$model.goods_num}(数量)</div>
                                </li>
                                <li class="clearfix">
                                    <div class="li1"> 小 计：</div>
                                    <div class="li2"><span style="color:#dd2727">¥</span><span style="color:#dd2727;font-size: 20px">{$model['goods_price']*$model['goods_num']}</span>元</div>
                                </li>
                                
                                     <li class="clearfix">
                                    <div class="li1">订单编号：</div>
                                    <div class="li2" style="color:#999999;">{$model2.order_no}</div>
                                </li>
                                     
                            
                            </ul>
                        </div>
                    </div>
                </div>
                
                  <include file="Member:left_menu"/>
            </div>
        </div>
    </div>
</div>


</block>
<block name="otherjs">

    <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <!-- ZUI Javascript组件-->
 <script src="__PUBLIC__/Fwadmin/js/zui.min.js"></script>                       
<script type="text/javascript" src="__PUBLIC__/phone/plupload/plupload.full.min.js"></script>
<script type="text/javascript">
    var pickfiles = 'pickfiles';//按钮触发id
    var container = 'container';//图片显示id容器
    var container_value = 'container_value';//图片路径保存id容器
    var max_number = 5;//最多只能上传多少张
    var uploader = new plupload.Uploader({
        runtimes: 'html5',
        browse_button: pickfiles,
        url: "{:U('Upload/uploadfile')}",
        multipart_params: {
            //附加上传参数
            path: 'tuihuan/{:session("member_id")}',
            filetype: 'image'
        },
        chunk_size: '100mb',//最大分片大小
        multi_selection: false,
        filters: {
            max_file_size: '8mb',
            mime_types: [
                {title: "Image files", extensions: "jpg,gif,png,jpeg"},//这里要加上jpeg，因为苹果手机相册里的格式就是这种的
            ]
        },
        resize: {
            //图片压缩处理
            width: 1000,
            crop: false,
            preserve_headers: true
        },
        init: {
            PostInit: function () {
                console.log("upload init");
            },
            FilesAdded: function (up, files) {
                console.log(up.files);
			
                var filesArr = new Array();
                var oldstr = $('#' + container_value).val();
                if (oldstr) {
                    filesArr = $('#' + container_value).val().split(",");
                }
					
                if (filesArr.length >= max_number) { // 最多上传1个文件
                    layer.msg('最多只能上传' + max_number + '张图片', {icon: 5});
                    return;
                }
                //选择文件后直接上传， 或可改成点击按钮上传
                uploader.start();
            },
            UploadProgress: function (up, file) {
                layer.load(1);
            },
            FileUploaded: function (up, file, info) {
               //console.log(info);
                //console.log(info['response']);
                var response = JSON.parse(info['response']);
                //console.log(response['Success']);
				 
                if (response['Success']) {
				
                    $('#' + container).append('<div class="pic" style="float:left; margin-right:10px;" savename="' + response['SaveName'] + '"><a href="__ROOT__' + response['SaveName'] + '" target="_blank"><img src="__ROOT__' + response['SaveName'] + '" alt="" width="100"></a><p  class="del" style="text-align:center;cursor:pointer">删除</p></div>');
                    //赋值保存
                    var filesArr = new Array();
                    var oldstr = $('#' + container_value).val();
                    if (oldstr) {
                        filesArr = $('#' + container_value).val().split(",");
                    }
                    filesArr.push(response['SaveName']);
                    $('#' + container_value).val(filesArr.join(','));
                } else {
                    layer.msg('上传出错', {icon: 5});
                }
                layer.closeAll('loading');
            },
            UploadComplete: function (up, files) {
				
                console.log('[完成]');
            },
            Error: function (up, err) {
             
            }
        }
    });
    uploader.init();
</script>
<script>
    $(function () {
		 var delFileUrl="{:U('Upload/delfile')}";//图片删除操作方法
        $('body').on("click", ' .pic .del', function () {
            var filename = $(this).parent('.pic').attr('savename');
            var filesArr = new Array();
            var oldstr = $('#' + container_value).val();
            if (oldstr) {
                filesArr = $('#' + container_value).val().split(",");
                var index = filesArr.indexOf(filename);
                if (index > -1) {
                    filesArr.splice(index, 1);
                }
				
                 if(filename!==''){
					filename_array = filename.split("/");
					var n =filename_array.length-1
					picture_name =filename_array[n];
					
				   $.ajax({
                     url:delFileUrl+"?filename="+picture_name,
                     success:function(val){
						
                   }
                    });
					$('#' + container_value).val(filesArr.join(','));
                    $(this).parent('.pic').remove();
				 }
				
				
                 
                //这里还可以写ajax删除原始图片
            }
        })
    })
	
	//检查输入字数
function checkWord(which) { 
var maxChars = 200; 
if (which.value.length > maxChars) 
which.value = which.value.substring(0,maxChars); 
var curr = maxChars - which.value.length; 
$('#wordCheck').html(curr.toString()); 
} 


function jisuan_price(v){
  price = parseInt(v.value)
  if(price>{$model['goods_price']*$model['goods_num']}){
   $('#price').val({$model['goods_price']*$model['goods_num']});
  }

}



/*****添加留言******/
function tuihuan_submit() {
    var reason = $.trim($("#reason").val());
	var price = $.trim($("#price").val());
    var detail = $.trim($("#detail").val());

	if (reason == "") {
	
		 layer.tips('请选择退款原因', '#reason',{ time: 1000, tips: [2,'#282828'] });
        $("#reason").focus();
        return;
    }
	
	if (price == "") {
	 layer.tips('请输入退款金额', '#price',{ time: 1000, tips: [2,'#282828'] });
        $("#price").focus();
        return;
    }
		

	if (detail == "") {
		 layer.tips('请输入退款说明', '#reason',{ time: 1000, tips: [2,'#282828'] });
        $("#detail").focus();
        return;
    }
	var index = layer.load(0, {shade: [0.5,'#999'] }); //0代表加载的风格，支持0-
    $.ajax({
        url: "{:U('Member/shenqing_tuihuan_submit')}",
        data: $("#frm1").serialize(),
        cache: false,
        type: "POST",
        success: function (obj) {
            if (obj.title == 'success') {
			 layer.closeAll('loading');
			layer.alert(obj.msg, function(index){
               document.location = "{:U('Member/tuihuan')}";
              layer.close(index);
              });   
               
            }
            else {
				 layer.closeAll('loading');
				layer.msg(obj.msg, {icon: 5}); 
            }
        },
        error: function () {
			 layer.closeAll('loading');
			layer.msg('提交出现错误！', {icon: 5}); 
        }
    });
  
}


</script>
</block>
